<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test"></table>
 
<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="open" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="openDemo" {{ d.id == 10003 ? 'checked' : '' }}>
</script>
 
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>

              
          
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>
layui.use('table', function(){
  var table = layui.table
  ,form = layui.form;
  
  table.render({
    elem: '#test'
     ,page: true
    ,cols:  [[
      
       {field:'id', width:'20%', title: '序号', sort: true, fixed: 'left'}
      ,{field:'gNum', width:'20%', title: '柜号',align: 'center'}
        ,{field:'operatorNum', width:'20%', title: '操作员号',align: 'center'}
      ,{field:'open', title:'是否开工', width:'20%', templet: '#switchTpl', unresize: true}
      ,{field:'lock', title:'是否日结', width:'20%', templet: '#checkboxTpl', unresize: true}
    ]]
    //本地模拟数据
    ,data:[
      {
 				"id":"1",
 				"gNum":"01",
 				"operatorNum":"01",
 				//"fixed":"#barDemo"
 				
 			},
 			 {
 				"id":"2",
 				"gNum":"01",
 				"operatorNum":"01",
 					//"fixed":"#barDemo"
 				
 			}
 			 , {
 				"id":"3",
 				"gNum":"01",
 				"operatorNum":"01",
 					//"fixed":"#barDemo"
 			
 			}
      ] 
  });
  
  //监听性别操作
  form.on('switch(openDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
  
  //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
});
</script>

</body>
</html>